<template>
	<view class="echart">
		<div ref="bar4"></div>
	</view>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {}
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      const data = this.chartData;
      const xData = this.chartData.map(item => item.label);
      const yData1 = this.chartData.map(item => item.value);
      const maxArray = new Array(data.map(item => item.value).length).fill(Math.max(...(data.map(item => item.value))));
      let option = {
        grid: {
          top: '15%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          textStyle: {
            color: "#000",
            fontSize: 12,
          },
          backgroundColor: "rgba(255, 255, 255, .92)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          // formatter: function (params) {
          //   var str = params[0].name + "：";
          //   params.filter(function (item) {
          //     if (item.componentSubType == "bar") {
          //       str += item.value + '个';
          //     }
          //   });
          //   return str;
          // },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: 'rgba(160,160,160,0.3)'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#666666',
              interval: 0,
              align: "center",
              // formatter: function(value) {
              //   return value.length > 5 ? value.slice(0, 5) + '...' : value; // 只显示前4个字符，并添加省略号
              // }
            },
            data: xData
          }
        ],
        yAxis: {
          type: 'value',
          name: '个',
          nameTextStyle: {
            color: '#666666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(160,160,160,0.3)", //网格线的颜色
              width: 1, //X轴的粗细
              type: "dashed", //虚线
            },
          },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666',
              fontSize: 12
            }
          }
        },
        series: [
          {
            name: "支付进度",
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(255, 192, 122, 1)', },
                  { offset: 1, color: 'rgba(244, 155, 55, 1)', },
                ]),
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            barWidth: '25%',
            data: yData1
          },
          {
            name: "",
            barGap: '-135%',
            type: 'bar',
            z: 0,
            data: maxArray,
            barWidth: 27,
            itemStyle: {
              normal: {
                color: 'rgba(151, 166, 179, 0.13)'
              }
            },
            tooltip: {show: false}
          },
        ]
      }
      this.$refs.bar4.init(this.$echarts, chart => {
        chart.setOption(option);
      });
    }
  }
}
</script>

<style scoped>
.echart{
  width: 100%;
  height: 100%;
}
</style>
